<style lang="scss" scoped>

</style>
<template>
    <i-article>
        <article>
            <seamless-brief>
                <Alert show-icon style="margin-top: 16px">
                    <code>import { modal } from 'kzjr_ui'</code>
                    <br/>
                    <br/>
                    <code>Vue.use(modal)</code>
                </Alert>
            </seamless-brief>
            <Demo title="自定义弹窗" :vertical="true">
                <div slot="demo">
                    <kzjr-button type="primary" @click="openModal">自定义弹窗</kzjr-button>
                    <kzjr-modal @modal-shut="shut" :visible="visible">
                        <div style="margin:20px 0">
                            <kzjr-radio v-model="radio" label="1" border>备选项1</kzjr-radio>
                            <kzjr-radio v-model="radio" label="2" border>备选项2</kzjr-radio>
                        </div>
                        <div style="margin:20px 0">
                            <kzjr-input v-if="radio == '1'" placeholder="请输入内容" v-model="input3">
                                <template slot="prepend">备选项1</template>
                            </kzjr-input>
                             <kzjr-input v-else placeholder="请输入内容" v-model="input3">
                                <template slot="prepend">备选项2</template>
                            </kzjr-input>
                        </div>
                    </kzjr-modal>
                </div>
                <i-code lang="html" slot="code">{{ code }}</i-code>
            </Demo>
            <Table border :columns="columns1" :data="data1"></Table>
        </article>
    </i-article>
</template>
<script>
    import iArticle from '../../component/article.vue'
    import iCode from '../../component/code.vue'
    import Demo from '../../component/demo.vue'
    import Code from '../../code/kzjrmessage'
    import seamlessBrief from '../brief/kzjr.vue'
    import columns from '../../data-manage/columns'
    import Vue from 'vue'
    import { modal, radio, button, input } from 'kzjr_ui'
    Vue.use(modal)
    Vue.use(radio)
    Vue.use(input)
    Vue.use(button)

    export default {
        components: {
            iArticle,
            iCode,
            Demo,
            seamlessBrief
        },
        data () {
            return {
                code: Code,
                visible: false,
                radio: '1',
                input3: '',
                columns1: columns,
                data1: [
                    {
                        key1: 'size',
                        key2: '尺寸',
                        key3: 'string',
                        key4: 'medium / small / mini',
                        key5: '——'
                    },
                    {
                        key1: 'type',
                        key2: '类型',
                        key3: 'string',
                        key4: 'primary / success / warning / danger / info / text',
                        key5: '——'
                    }, {
                        key1: 'round',
                        key2: '是否圆角按钮	',
                        key3: 'boolean',
                        key4: '——',
                        key5: 'false'
                    }, {
                        key1: 'circle',
                        key2: '是否圆形按钮	',
                        key3: 'boolean',
                        key4: '——',
                        key5: 'false'
                    }, {
                        key1: 'disabled',
                        key2: '是否禁用状态	',
                        key3: 'boolean',
                        key4: '——',
                        key5: 'false'
                    }, {
                        key1: 'autofocus',
                        key2: '是否默认聚焦',
                        key3: 'boolean',
                        key4: '——',
                        key5: 'false'
                    }, {
                        key1: 'native-type',
                        key2: '原生 type 属性',
                        key3: 'string',
                        key4: 'button / submit / reset',
                        key5: 'button'
                    },
                ]
            }
        },
        methods: {
            openModal () {
                this.visible = true
            },
            shut () {
                this.visible = false
            }
        }
    }
</script>